<template>
   
  <div class="walletAt">
    <div class="block-bor">
      <van-button color="#222224">PT</van-button>
      <van-button color="#2D58E7">PLAY</van-button>
      <van-cell title="PLAY可用" title-class="title" :value="ableNum" :border="false" />
      <div class="bor"></div>
      <van-cell title="PLAY冻结" title-class="title" :value="unableNum" :border="false" />
    </div>
    <van-tabs v-model:active="active" color="#2D58E7" shrink>
      <van-tab title="提取记录">
        <div class="list-block">
          <template v-for="(item,index) in list[0]" :key="index">
            <van-cell :value="item.value" :border="false">
              <template #title>
                <div class="item-title text-left"> 提取PLAY</div>
              </template>
              <template #value>
                <div class="item-title">{{item.value}}</div>
              </template>
            </van-cell>
            <div class="item-title text-white">{{item.time}}</div>
            <div class="bor" v-if="index+1<list[0].length"></div>
          </template>
        </div>
        <div class="btns">
          <van-button color="#2D58E7" to="recharge">充值</van-button>
          <van-button color="#F9A614" to="withdraw">提取</van-button>
        </div>
      </van-tab>
      <van-tab title="冻结记录">
        <div class="list-block">
          <template v-for="(item,index) in list[1]" :key="index">
            <van-cell :value="item.value" :border="false">
              <template #title>
                <div class="item-title text-left">兑换PLAY</div>
              </template>
              <template #value>
                <div class="item-title">{{item.value}}</div>
              </template>
            </van-cell>
            <div class="item-title text-white">{{item.time}}</div>
            <div class="bor" v-if="index+1<list[1].length"></div>
          </template>
        </div>
        <div class="btns">
          <van-button color="#F9A614" to="withdraw">提取</van-button>
        </div>
      </van-tab>
      <van-tab title="解冻记录">
        <div class="list-block">
          <template v-for="(item,index) in list[2]" :key="index">
            <van-cell :value="item.value" :border="false">
              <template #title>
                <div class="item-title text-left">静态解冻</div>
              </template>
              <template #value>
                <div class="item-title">{{item.value}}</div>
              </template>
            </van-cell>
            <div class="item-title text-white">{{item.time}}</div>
            <div class="bor" v-if="index+1<list[2].length"></div>
          </template>
        </div>
        <div class="btns">
          <van-button color="#F9A614" to="withdraw">提取</van-button>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
   

  export default {
     
    data() {
      return {
        ableNum: 0,
        unableNum: 0,
        list: [
          [{
            time: "2022/1/9 14:36:00",
            value: "+100.00"
          }, {
            time: "2022/1/9 14:36:00",
            value: "+100.00"
          }, {
            time: "2022/1/9 14:36:00",
            value: "+100.00"
          }],
          [{
            time: "2022/1/9 14:36:00",
            value: "+100.00"
          }, {
            time: "2022/1/9 14:36:00",
            value: "+100.00"
          }, {
            time: "2022/1/9 14:36:00",
            value: "+100.00"
          }],
          [{
            time: "2022/1/9 14:36:00",
            value: "+100.00"
          }, {
            time: "2022/1/9 14:36:00",
            value: "+100.00"
          }, {
            time: "2022/1/9 14:36:00",
            value: "+100.00"
          }]

        ]
      }
    },
    methods: {

    }
  }

</script>
<style lang="less" scoped>
  .walletAt {
    .block-bor {
      padding: 15px 0;
    }

    .van-cell {
      background: #0B0C1C;
      align-items: center;
      padding: 12px 15px;
      border-radius: 8px;
    }

    .van-tabs__content .van-cell {
      padding: 15px 15px 10px 15px;
      background: linear-gradient(136deg, #14181B 0%, #222020 100%);
    }

    :deep(.van-button) {
      width: 80px;
      height: 34px;
      border-radius: 4px;
      margin-left: 15px;
    }

    .btns {
      display: flex;
      justify-content: space-between;
      padding: 15px;

      :deep(.van-button) {
        width: 158px;
        height: 44px;
        background: #2D58E7;
        border-radius: 4px;
        margin-left: 0;
      }
    }


    :deep(.title) {
      font-size: 15px;
      font-weight: 600;
      color: #9C9D9E;
      line-height: 21px;
      padding-left: 3px;
    }

    :deep(.block-bor .van-cell__value) {
      font-size: 15px;
      font-weight: 500;
      color: #AD9475;
      line-height: 21px;
    }

    .bor {
      height: 1px;
      background: #333036;
    }

    :deep(.van-tabs__nav) {
      background: #0B0C1C;
    }

    :deep(.van-tab__text) {
      color: #9C9D9E;
    }

    :deep(.van-tabs__line) {
      height: 1px;
    }

    .item-title {
      font-size: 14px;
      font-family: PingFangTC-Medium, PingFangTC;
      font-weight: 500;
      color: #AF7743;
      line-height: 20px;
    }

    .text-white {
      color: #9C9D9E;
      text-align: left;
      padding: 0 15px 15px 15px;
    }

    .text-left {
      text-align: left;
    }

    .list-block {
      margin: 15px;
      background: linear-gradient(136deg, #14181B 0%, #222020 100%);
      border-radius: 8px;
      border: 1px solid #333036;
    }

  }

</style>
